<template>
  <view class="u-tabbar">
    <view
      class="u-tabbar__content"
      ref="u-tabbar__content"
      @touchmove.stop.prevent="noop"
      :class="[border && 'u-border-top', fixed && 'u-tabbar--fixed']"
      :style="[tabbarStyle]"
    >
      <view class="u-tabbar__content__item-wrapper">
        <view
          class="zzd-tabbar-item flex align-center column justify-center"
          :class="{
            'zzd-tabbar-item__active': item.pagePath === path,
          }"
          v-for="(item, index) in currentTabbarList"
          :key="index"
          @click="changeTabar(item)"
        >
          <image class="zzd-icon" :src="item.pagePath === path ? item.selectedIconPath : item.iconPath"></image>
          <text class="zzd-text">{{ item.text }}</text>
        </view>
      </view>
      <u-safe-bottom v-if="safeAreaInsetBottom"></u-safe-bottom>
    </view>
    <view
      class="u-tabbar__placeholder"
      v-if="placeholder"
      :style="{
        height: placeholderHeight + 'px',
      }"
    ></view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import props from "uview-ui/components/u-tabbar/props.js";
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin("dom");
// #endif
/**
 * Tabbar 底部导航栏
 * @description 此组件提供了自定义tabbar的能力。
 * @tutorial https://www.uviewui.com/components/tabbar.html
 * @property {String | Number}	value				当前匹配项的name
 * @property {Boolean}			safeAreaInsetBottom	是否为iPhoneX留出底部安全距离（默认 true ）
 * @property {Boolean}			border				是否显示上方边框（默认 true ）
 * @property {String | Number}	zIndex				元素层级z-index（默认 1 ）
 * @property {String}			activeColor			选中标签的颜色（默认 '#1989fa' ）
 * @property {String}			inactiveColor		未选中标签的颜色（默认 '#7d7e80' ）
 * @property {Boolean}			fixed				是否固定在底部（默认 true ）
 * @property {Boolean}			placeholder			fixed定位固定在底部时，是否生成一个等高元素防止塌陷（默认 true ）
 * @property {Object}			customStyle			定义需要用到的外部样式
 *
 * @example <u-tabbar :value="value2" :placeholder="false" @change="name => value2 = name" :fixed="false" :safeAreaInsetBottom="false"><u-tabbar-item text="首页" icon="home" dot ></u-tabbar-item></u-tabbar>
 */
export default {
  name: "u-tabbar",
  mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  data() {
    return {
      placeholderHeight: 0,
      tabbarList: [
        {
          pagePath: "pages/index/index",
          iconPath: require("@/static/tabbar/home.png"),
          selectedIconPath: require("@/static/tabbar/home_active.png"),
          text: "首页",
        },
        {
          pagePath: "pages/activity/index",
          iconPath: require("@/static/tabbar/activity.png"),
          selectedIconPath: require("@/static/tabbar/activity_active.png"),
          text: "活动",
        },
        {
          pagePath: "pages/agenda/index",
          iconPath: require("@/static/tabbar/agenda.png"),
          selectedIconPath: require("@/static/tabbar/agenda_active.png"),
          text: "议程",
        },
        {
          pagePath: "pages/hall/index",
          iconPath: require("@/static/tabbar/hall.png"),
          selectedIconPath: require("@/static/tabbar/hall_active.png"),
          text: "展区",
        },
        {
          pagePath: "pages/mine/index",
          iconPath: require("@/static/tabbar/mine.png"),
          selectedIconPath: require("@/static/tabbar/mine_active.png"),
          text: "我的",
        },
      ],
    };
  },
  props: {
    path: {
      type: String,
      default: "/pages/index/index",
    },
  },
  computed: {
    ...mapState({
      tabbarRules: (state) => state.tabbarRules,
    }),

    currentTabbarList() {
      let tabbarList = [];
      try {
        const list = this.tabbarRules.split(",");
        list.forEach((v, index) => {
          const [i, rule] = v.split(":") || [];
          if (index + 1 === +i && Boolean(+rule)) {
            tabbarList.push(this.tabbarList[index]);
          }
        });
      } catch (error) {}
      return tabbarList || this.tabbarList;
    },

    tabbarStyle() {
      const style = {
        zIndex: this.zIndex,
      };
      // 合并来自父组件的customStyle样式
      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
    },
    // 监听多个参数的变化，通过在computed执行对应的操作
    updateChild() {
      return [this.value, this.activeColor, this.inactiveColor];
    },
    updatePlaceholder() {
      return [this.fixed, this.placeholder];
    },
  },
  watch: {
    updateChild() {
      // 如果updateChildren中的元素发生了变化，则执行子元素初始化操作
      this.updateChildren();
    },
    updatePlaceholder() {
      // 如果fixed，placeholder等参数发生变化，重新计算占位元素的高度
      this.setPlaceholderHeight();
    },
  },
  created() {
    this.children = [];
  },
  mounted() {
    this.setPlaceholderHeight();
  },
  methods: {
    updateChildren() {
      // 如果存在子元素，则执行子元素的updateFromParent进行更新数据
      this.children.length && this.children.map((child) => child.updateFromParent());
    },
    // 设置用于防止塌陷元素的高度
    async setPlaceholderHeight() {
      if (!this.fixed || !this.placeholder) return;
      // 延时一定时间
      await uni.$u.sleep(20);
      // #ifndef APP-NVUE
      this.$uGetRect(".u-tabbar__content").then(({ height = uni.upx2px(120) }) => {
        // 修复IOS safearea bottom 未填充高度
        this.placeholderHeight = height;
        this.$emit("init-foot", height);
      });
      // #endif

      // #ifdef APP-NVUE
      dom.getComponentRect(this.$refs["u-tabbar__content"], (res) => {
        const { size } = res;
        this.placeholderHeight = size.height;
      });
      // #endif
    },

    changeTabar(item) {
      uni.switchTab({
        url: "/" + item.pagePath,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "uview-ui/libs/css/components.scss";

.u-tabbar {
  @include flex(column);
  flex: 1;
  justify-content: center;

  &__content {
    @include flex(column);
    background-color: #fff;

    &__item-wrapper {
      // height: 120rpx;
      @include flex(row);
    }
  }

  &--fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

.zzd-tabbar-item {
  flex: 1;
  align-items: center !important;

  image {
    transition: all 0.2s linear;
  }

  .zzd-text {
    font-size: 22rpx;
    color: #999999;
  }
  .zzd-icon {
    margin-top: 10rpx;
    width: 48rpx;
    height: 48rpx;
  }
}

.zzd-tabbar-item__active {
  .zzd-text {
    color: #3229b1;
  }

  // .zzd-icon {
  //   width: 56rpx;
  //   height: 56rpx;
  //   border-radius: 16rpx;
  //   box-shadow: 0rpx 20rpx 40rpx 0rpx rgba(51, 154, 240, 0.3);
  // }
}
</style>
